<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XIN BLOG</title>
    <link rel="stylesheet" href="/static/css/editormd.css"/>
    <link rel="stylesheet" href="/static/css/my_detail.css"/>
    <link href="/static/css/element.css" rel="stylesheet">
    <link href="/static/css/base.css" rel="stylesheet">
    <link rel="icon" href="\static\images\mini_icon.png" sizes="20x20">
    <style>
        html,body {
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body style=" text-align:center">
<div id="app1" style="width: 70%; margin-left:auto;">
    <el-container style="height: 100%; min-width: 1000px; min-height: 600px; margin:-left:auto;">
        <el-header style="height: 50px; vertical-align: middle;">
            <el-page-header v-if="show_header==true" content="详情页面" style="height: 100%; vertical-align: middle; line-height: 50px;">
            </el-page-header>

            <div v-if="show_header==false" content="Candy Mini Blog" style="height: 100%; vertical-align: middle; line-height: 50px; text-align:left;">
            {{ username }} Mini Blog
            </div>
        </el-header>
<!--        <br>-->
        <el-container style="height: 10%;">
            <el-aside width="200px" style="height: 100%;">
<!--                <h5>自定义颜色</h5>-->
                <div>
                    <el-avatar v-if="is_login==true" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="110"></el-avatar>
                    <el-avatar v-if="is_login==false":size="110">游客</el-avatar>
                </div>
                <div style="background-color: none; line-height: 0px; margin-top: -80px">
                    <el-row style="background-color: #C0C4CC;" v-if="is_login==true">
                        <el-button type="primary" icon="el-icon-edit" circle @click="new_editor()"></el-button>
                        <el-button type="primary" icon="el-icon-picture" circle @click="user_img()"></el-button>
<!--                        <el-button type="success" icon="el-icon-check" circle></el-button>-->
                        <el-button type="primary" icon="el-icon-more-outline" circle @click="logout()"></el-button>
                    </el-row>
                    <el-row style="background-color: #D3DCE6;" v-if="is_login==false">
                        <el-button @click="login()">登录</el-button>
                        <el-button type="primary" @click="register()">注册</el-button>
                    </el-row>
                </div>
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>个人空间</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">我的博文</el-menu-item>
                            <el-menu-item index="1-2">我的账户</el-menu-item>
                            <el-menu-item index="1-3" disabled>我的回复</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">友情链接</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" disabled>微博</el-menu-item>
                            <el-menu-item index="2-2" disabled>百度</el-menu-item>
                            <el-menu-item index="2-3" disabled>网易</el-menu-item>
                            <el-menu-item index="2-4" disabled>Github</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">娱乐空间</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1" disabled>音乐</el-menu-item>
                            <el-menu-item index="3-2" disabled>视频</el-menu-item>
                            <el-menu-item index="3-3" disabled>学习</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container style="height: 100%;">
<!--                <el-header>标题等信息</el-header>-->
<!--                <h3 style="height: 3%; margin: 0; text-align: center;">标题</h3>-->
                <el-input
                        placeholder="请输入内容"
                        v-model="input4" style="width: 30%; margin-left: 20px; margin-top: 10px">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <div style="height: 9%;">
                    <span style="text-align:left; font-size: 15px;"><a href="#" style="text-decoration:none !important; color:Black !important;" id="title">头上一片晴天，心中一个想念</a></span>
                    <el-divider content-position="right" id="author">from: {{ author }}</el-divider>
                </div>

<!--                <el-main style="height: 90%;">-->
<!--                    主要内容-->
                    <div id="show-editor" style="height: 100%;">
                        <textarea id="message" name="message"></textarea>
                    </div>
<!--                </el-main>-->
                <el-footer style="height: 1%;"></el-footer>
            </el-container>
            <el-aside width="300px">
                <el-container>
                    <el-header>
                        文章推荐
                        <el-button type="info" icon="el-icon-refresh" circle :size="10" @click="show()"></el-button>
                    </el-header>
<!--                    <el-main>推荐列表</el-main>-->
                    <el-main style="background-color:#C0C4CC">
                        <el-card class="box-card" style="width: 110%; margin-left: -15px;">
                            <div v-for="o in a" :key="o" class="text item" @click="add(o.aid, o.a_type)" style="height: 40px; line-height: 40px; text-align: left; margin-bottom: 3px;">
                                {{ o.title }}
                            </div>

                        </el-card>
                    </el-main>

                </el-container>
            </el-aside>
        </el-container>
        <hr>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="/static/js/element.js"></script>
<script src="/static/js/editormd.js"></script>
<script src="/static/lib/marked.min.js"></script>
<script src="/static/lib/prettify.min.js"></script>
<script src="/static/lib/raphael.min.js"></script>
<script src="/static/lib/underscore.min.js"></script>
<script src="/static/lib/sequence-diagram.min.js"></script>
<script src="/static/lib/flowchart.min.js"></script>
<script src="/static/lib/jquery.flowchart.min.js"></script>
<!--<script src="/static/js/my_detail.js"></script>-->
<script src="/static/js/index.js"></script>
<script src="/static/js/dongtai.js"></script>
</body>
</html>